<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>招聘网中的简历模板</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字体图标文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    自定义样式-->
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
<div class="row">
    <!--    左侧信息栏-->
    <div class="col-sm-12 col-md-3 left">
        <div class="row justify-content-between">
            <div class="col-6 col-sm-5 col-md-12 p-4">
                <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="userPhoto"
                     class="img-fluid p-2 border">
                <h3 class="text-white text-center">白鹭</h3>
                <h5 class="text-center">求职意向:网站开发</h5>
            </div>
            <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
                <h4>出生年月</h4>
                <p>1995年10月10号</p>
                <h4>联系电话</h4>
                <p>12343212345</p>
                <h4>电子邮箱</h4>
                <p>abcd1234@qq.com</p>
                <h4>联系地址</h4>
                <p>北京市朝阳区</p>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-9 right p-0">
        <!--        导航栏-->
        <div class="my-4">
            <ul class="clearfix">
                <li class="float-sm-left">
                    <i class="fa fa-user-circle-o fa-2x">
                        <a href="index.html" class="ml-2">个人履历</a>
                    </i>
                </li>
                <li class="float-sm-left mx-sm-5">
                    <i class="fa fa-envelope-o fa-2x">
                        <a href="contact.html" class="ml-2">请给我发邮件</a>
                    </i>
                </li>
                <li class="float-sm-left">
                    <i class="fa fa-home fa-2x">
                        <a href="photo.html" class="ml-2">照片</a>
                    </i>
                </li>
            </ul>
        </div>
        <!--        工作经历-->
        <h5 class="color1">工作经历</h5>
        <div class="px-5 py-2">
            <table class="table">
                <thead class="table-success">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">时间</th>
                    <th scope="col">单位</th>
                    <th scope="col">职位</th>
                </tr>
                </thead>
                <tbody class="table-info">
                <tr>
                    <th>1</th>
                    <td>2018/8-2019/10</td>
                    <td>八面恒通网络公司</td>
                    <td>软件测试工程师</td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>2019/11-2020/10</td>
                    <td>千古网络科技公司</td>
                    <td>软件工程师</td>
                </tr>
                <tr>
                    <th>3</th>
                    <td>2020/12-至今</td>
                    <td>冰原网络科技公司</td>
                    <td>前端工程师</td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--        专业技能-->
        <h5 class="color2">专业技能</h5>
        <div class="px-5 py-2">
            <!--            嵌套格栅-->
            <div class="row">
                <div class="col-6">
                    <!--                    使用卡片组件-->
                    <div class="card border-primary text-primary">
                        <div class="card-header border-primary">擅长的技能</div>
                        <div class="card-body">
                            <p class="card-text">
                                HTML、CSS、JavaScript、jQuery、bootstrap、Vue.js、Angular.js、node.js、PHP、MySQL</p>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-success text-success">
                        <div class="card-header border-success">熟悉的技能</div>
                        <div class="card-body">
                            <p class="card-text">C语言、C++、C#、Java、Oracle、Python</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        教育经历-->
        <h5 class="color3">教育经历</h5>
        <div class="px-5 py-2">
            <ul class="list-group">
                <li class="list-group-item list-group-item-warning">
                    <div class="row">
                        <div class="col-4">时间</div>
                        <div class="col-4">学校</div>
                        <div class="col-4">专业</div>
                    </div>
                </li>
                <li class="list-group-item list-group-item-info">
                    <div class="row">
                        <div class="col-4">2013/6-2017/6</div>
                        <div class="col-4">新疆大学</div>
                        <div class="col-4">计算机科学与技术</div>
                    </div>
                </li>
                <li class="list-group-item list-group-item-info">
                    <div class="row">
                        <div class="col-4">2017/8-2018/6</div>
                        <div class="col-4">软件开发公司</div>
                        <div class="col-4">web前端工程师</div>
                    </div>
                </li>
            </ul>
        </div>
        <!--        综合概述-->
        <h5 class="color4">综合概述</h5>
        <div class="px-5 py-2">
            <div id="accordion">
                <div class="card">
                    <div class="card-header">
                        <a href="#collapseOne" class="card-link" data-toggle="collapse">获得证书</a>
                    </div>
                    <div id="collapseOne" class="collapse show" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-info">
                                    1、英语等级证书：大学四、六级证书（CET4,CET6）。
                                </li>
                                <li class="list-group-item list-group-item-info">
                                    2、计算机证书：全国计算机二级及三级和四级。
                                </li>
                                <li class="list-group-item list-group-item-info">
                                    3、学校证书包括：奖学金证书、三好学生、优秀毕业生、优秀班干部。
                                </li>
                                <li class="list-group-item list-group-item-info">
                                    4、财务类证书：注册会计师。
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a href="#collapseTwo" class="collapsed card-link" data-toggle="collapse">自我评价</a>
                    </div>
                    <div id="collapseTwo" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            本人热爱学习，工作态度严谨认真，责任心强，有很好的团队合作能力。有良好的分析，解决问题的思维。诚实、稳重、勤奋、积极上进，
                            拥有丰富的大中型企业管理经验，有较强的团队管理能力，良好的沟通协调组织能力，敏锐的洞察力，自信是我的魅力。
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a href="#collapseThree" class="collapsed card-link" data-toggle="collapse">兴趣爱好</a>
                    </div>
                    <div id="collapseThree" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-info">阅读类：读报、看杂志</li>
                                <li class="list-group-item list-group-item-info">运动类：篮球、足球、乒乓球</li>
                                <li class="list-group-item list-group-item-info">饮食类：西餐、川菜</li>
                                <li class="list-group-item list-group-item-info">音乐类：古典、轻音乐</li>
                                <li class="list-group-item list-group-item-info">服饰类：正式、休闲</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>